<script setup lang="ts">
import { ref, onBeforeMount, onMounted,h} from 'vue'
import { message } from 'ant-design-vue'
import { setTableHeight, setFixedColumnWidth } from '@/common/utils'
import useRequestList,{actionKeys} from './requestList'
import useRouteList from '@/views/sysAuth/route/routeList'
import searchPanel from '@/components/SearchPanel'
import Add from './add.vue'
import Update from './update.vue'
import {useModalDraggable} from "@/hooks/useModalDraggable"

const columns = ref([
	{
		title: '请求名',
		dataIndex: 'requestName',
		key: 'requestName',
		width: 150,
		align: 'center',
	},
	{
		title: '请求路径',
		dataIndex: 'requestPath',
		key: 'requestPath',
		width: 150,
		align: 'center',
		ellipsis:true,
	},
	{
		title: '授权才能访问',
		dataIndex: 'needAuth',
		key: 'needAuth',
		width: 120,
		align: 'center',
		customRender: ({ text: v }: { text: boolean }) => {
			return v ? h('span', { style: { color: 'rgb(29, 165, 122)' } }, '是') : h('span', { style: { color: 'rgb(245, 108, 108)' } }, '否')
		},
	},
	{
		title: '描述',
		dataIndex: 'description',
		key: 'description',
		width: 120,
		align: 'center',
		ellipsis: true,
	},
	{
		title: '所属页面路由名集合',
		dataIndex: 'routeNames',
		key: 'routeNames',
		width: 150,
		align: 'center',
		ellipsis: true,
	},
	{
		title: '所属页面标题集合',
		dataIndex: 'routeTitles',
		key: 'routeTitles',
		width: 120,
		align: 'center',
		ellipsis: true,
	},
	{
		title: '操作',
		dataIndex: 'operation',
		key: 'operation',
		// width: 120,
		align: 'center',
		fixed: 'right',
	},
])
const isSearching = ref(false)
const searchList = ref<RoleItem[]>([])
const current = ref(1)
const pageSize = ref(20)
const tableHeight = ref<number>()
const addModalVisible = ref(false)
const updateModalVisible = ref(false)
const addModalTitle='新增请求接口'
const updateModalTitle='更新请求接口'
const editRequest = ref({} as userType)
const pageList=ref<objType[]>([])
const searchOptions=ref<searchOptionType[]>([
	{type:'input',id:'requestName',props:{label:'请求名'}},
	{type:'input',id:'description',props:{label:'描述'}},
	{type:'select',id:'routeId',props:{label:'所在页面'},innerComponentProps:{showSearch:true,optionFilterProp:'label',options:[],
	}},
	{type:'select',id:'needAuth',props:{label:'是否需要授权'},innerComponentProps:{showSearch:true,optionFilterProp:'label',options:[
		 { label: '是', value: 1 },
		 { label: '否', value: 0 },
	],
	}},
])

useModalDraggable(addModalVisible,addModalTitle)
useModalDraggable(updateModalVisible,updateModalTitle)

const requestList = useRequestList()
const routeList=useRouteList()

onBeforeMount(() => {
	requestList.getList()
	getPageList()
	searchOptions.value.forEach(v=>{
		if(v.id==='routeId')  
		v.innerComponentProps!.options=pageList.value
	})
})

onMounted(() => {
	setFixedColumnWidth([actionKeys.update,actionKeys.delete],columns)
})

function getPageList(){
	routeList.list.forEach(v=>{
     if(v.component && !v.noNeedAuth && !v.link) pageList.value.push({label:v.title,value:v.id,...v})
	})
}

function handleSearchPanelcollapsed(h:number){
	setTableHeight({tableHeightRef:tableHeight,otherSectionHeight:h}) 
}

function search(value:objType){
	 let _searchList=JSON.parse(JSON.stringify(requestList.list))
   if(value.requestName) _searchList=_searchList.filter((v:requestItem)=>v.requestName===value.requestName)
   if(value.description) _searchList=_searchList.filter((v:requestItem)=>v.description.includes(value.description) || value.description.includes(v.description))
   if(value.routeId) _searchList=_searchList.filter((v:requestItem)=>v.routeIds?.includes(value.routeId))
	 if(value.needAuth || value.needAuth==0) _searchList=_searchList.filter((v:requestItem)=>v.needAuth==value.needAuth)
	 searchList.value=_searchList
	 isSearching.value=true
}

function reset() {
	isSearching.value = false
	requestList.getList()
}
function handleAdd() {
	addModalVisible.value = true
}
function handleAddModalClose(isSuccess: boolean) {
	addModalVisible.value = false
	if (isSuccess) {
		message.success('新增成功')
	}
}
function handleUpdate(row: userType) {
	editRequest.value = row
	updateModalVisible.value = true
}
function handleUpdateModalClose(isSuccess: boolean) {
	updateModalVisible.value = false
	if (isSuccess) {
		message.success('更新成功')
	}
}
async function handleDelete(row: userType) {
	const res = await requestList.deleteItem(row.id as number)
	if (res.code) {
		message.success('删除成功')
	}
	reset()	
}
</script>

<template>
	<div class="requestManage">
		<searchPanel :options="searchOptions"  @collapsed="handleSearchPanelcollapsed" @reset="reset" @search="search" />
		<div class="tableTool">
			<a-button type="primary" style="margin-right: 5px" @click="handleAdd" v-if="$hasAuth([actionKeys.add])">新增接口</a-button>
		</div>
		<a-table :dataSource="isSearching ? searchList : requestList.list" :columns="columns" size="small" style="width: 100%" class="myTable" rowKey="name" :scroll="{ x: '100%', y: tableHeight }"
		:pagination="{current:current,pageSize,total:isSearching?searchList.length:requestList.list.length,onChange:(num:number,pageSize:number)=>{current=num}}">
			<template #bodyCell="{ record, column }: any">
				<template v-if="column.key === 'operation'">
					<a-button type="primary" size="small" @click="handleUpdate(record)"  style="margin-right: 5px;" v-if="$hasAuth([actionKeys.update])">修改</a-button>
					<a-popconfirm title="确定要删除吗?" ok-text="确定" cancel-text="取消" @confirm="handleDelete(record)" placement="topLeft" v-if="$hasAuth([actionKeys.delete])">
						<a-button type="danger" size="small"  style="margin-right: 0px;" >删除</a-button>
					</a-popconfirm>
				</template>
			</template>
		</a-table>

		<Add :visible="addModalVisible" :title="addModalTitle" :pageList="pageList" @close="handleAddModalClose" />
		<Update :visible="updateModalVisible" :title="updateModalTitle" :editRequest="editRequest" :pageList="pageList" @close="handleUpdateModalClose" />
	</div>
</template>

<style scoped lang="less">
.requestManage {
	.tableTool {
		padding: 10px 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	
}
</style>